<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 评分组件示例</title>
    <!--vue前端js框架-->
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
</head>

<body>
    <div id="app">
        <div class="block">
            <span class="demonstration">区分颜色</span>
            <!-- 监听 change 事件 -->
            <el-rate v-model="value2" :colors="colors" @change="handleRateChange">
            </el-rate>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            value2: null,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900']
        },
        methods: {
            init() {
                console.log(this.value2);
            },
            // 处理评分变化的方法
            handleRateChange(newValue) {
                console.log('当前评分值为: ', newValue);
            }
        },
        mounted() {
            this.init();
        }
    })
</script>

</html>    